<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线性渐变</title>
	<style>
		canvas{border:1px solid #ddd;
				display: block;margin: 50px auto; }
	</style>
	</head>
	<body>
		<canvas id="canvas" ></canvas>
	</body>
	<!--
    	作者：zyl
    	时间：2017-05-23
    	描述：线性渐变色
    	 属性fillStyle
    	函数 var grd = context.createLinearGradient(xStart,yStart,xend,yend)
		    定义和用法
		createLinearGradient() 方法创建线性的渐变对象。
		参数(渐变开始点的 x 坐标)(渐变开始点的 y 坐标)(渐变结束点的 x 坐标)(渐变结束点的 y 坐标)
		渐变可用于填充矩形、圆形、线条、文本等等。
		提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
		提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
		  grd.addColorStop(stop,color);//参数位置 （0表示起始位置 1为终点）颜色 
    -->
    <script type="text/javascript">
var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
	var context=canvas.getContext('2d');
	//定义线性渐变量（从0，0点到800,800点）
 	// var linearGrad = context.createLinearGradient(0,0,800,800);//是一条斜线
 	 var linearGrad = context.createLinearGradient(0,0,600,0);//是水平的
 	 //渐变色的终止色会延续，超出画布的会看不见
 	 linearGrad.addColorStop(0.0,"#fff");
 	 linearGrad.addColorStop(0.3,"blue");
 	 linearGrad.addColorStop(0.5,"yellow");
 	 linearGrad.addColorStop(0.7,"red");
 	 linearGrad.addColorStop(1.0,"#000");
 	 context.fillStyle=linearGrad;
 	 context.fillRect(0,0,800,800);//绘制一个矩形
</script>
</html>
